<template >
  <div class="theSingleChoiceCard" :style="changeColorAndBorder">
    <div class="quesBox">


    <div class="quesTitle" >
      <span v-show="item.optional" class="quesStar">* </span>
      <span v-show="autoId">{{num+1}}.</span><span>{{item.title}}</span>
    </div>
    <div v-if="item.remark!=''" class="quesRemark" >
      说明：{{item.remark}}
    </div>


    <div  class="quesOptionGroup">
      <el-radio-group >
        <el-radio
            disabled
            v-for="(option) in item.option"
            :key="option.id"
            :label="option.description"
            class="quesAnOption"
        >{{option.description}}</el-radio>
      </el-radio-group>
    </div>
  </div>
  </div>
</template>

<script>

export default {
  name:'ESingleChoice',
  data(){
    return{

    }
  },
  watch:{
    tt(){
      this.$forceUpdate();
    }
  },
  props:{
    ifIsEditing:Boolean,  //是否正在编辑
    item:Object, //本题
    autoId:Boolean, //是否显示题号
    num:Number, //显示的题号（从0开始）
    tt:Number,
  },
  computed:{
    changeColorAndBorder:function (){
      if(this.ifIsEditing)
      return "background-color: #e7edfc; border: 2px dashed #b4c4ec";
      else return "";
    }
  }
}

</script>

<style scoped>
.theSingleChoiceCard{
  text-align: left;
  user-select:none;
  width: 99.4%;
}
.quesBox{
  padding:10px 40px 10px 40px;
}
.quesTitle{
  margin-bottom: 10px;
  text-align: left;
  font-size:17px;
  line-height: 1.3;
  display: block;
}
.quesRemark{
  margin-bottom: 20px;
  text-align: left;
  font-size:14px;
  line-height: 1.3;
  color:grey;
  display: block;
}
.quesStar{
  color:red;
  font-size: 20px;
  float:left;
}
.quesOptionGroup{
  padding: 0;
  margin: 0 0 10px 0;
  display: block;
}
.quesAnOption{
  margin:0 0 5px 0;
  display: block;
}
>>> .el-radio__input{
  cursor: default;
}
>>> .el-radio__input.is-disabled .el-radio__inner{
  cursor: default;
 background-color:  white;
}
>>> .el-radio__input.is-disabled+span.el-radio__label{
  color:#606266;
  cursor: default;
}
</style>